<template>
	<page-container title="订单评论">
		<view class="jifen">

			<view class="title">积分比例</view>
			<view class=" ratio-card">
				<view class="progress-section">
					<!-- 中间显示的百分比 -->
					<view class="percent-label" :style="{ left: greenRatio + '%' }">{{greenRatio}}%</view>

					<!-- 自定义进度条 -->
					<view class="progress-bar" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd">
						<view class="progress-green" :style="{ width: greenRatio + '%' }"></view>
						<view class="divider" :style="{ left: greenRatio + '%' }"></view>
						<view class="progress-orange" :style="{ width: orangeRatio + '%' }"></view>
					</view>

					<!-- 底部比例说明 -->
					<view class="ratio-labels">
						<view>积分占比：<text class="left-ratio">{{greenRatio}}%</text> </view>
						<view>现金占比：<text class="right-ratio">{{orangeRatio}}%</text> </view>
					</view>
				</view>

				<!-- 说明文本 -->
				<view class="description">
					*当前店铺积分比例：<text class="left-ratio">{{greenRatio}}%</text>积分+现金：<text
						class="right-ratio">{{orangeRatio}}%</text>
				</view>
				<view class="notice">
					每月仅支持该一次，请认真对
				</view>


			</view>
			<view class="submit-btn">
				<view class="btn" @click="handleSubmit">提交</view>
			</view>
		</view>
	</page-container>
</template>

<script lang="ts" src="./index.ts"></script>

<style lang="scss" scoped>
.jifen{
	position: relative;
	z-index: 11;
	background: linear-gradient(180deg, #ffffff, #f3f3f3);
	padding-top: 20rpx;
	.progress-section {
		position: relative;
		padding: 20rpx 0;
	
		.percent-label {
			position: absolute;
			top: -50rpx;
			transform: translateX(-50%);
			color: #43d534;
			font-size: 28rpx;
			padding: 14rpx 28rpx;
			border-radius: 12rpx;
			background: #ffffff;
			box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.16);
		}
	
		.progress-bar {
			height: 16rpx;
			background-color: #f5f5f5;
			border-radius: 8rpx;
			display: flex;
			overflow: hidden;
			position: relative;
	
			.progress-green {
				background-color: #4cd964;
				height: 100%;
				transition: width 0.1s ease;
			}
	
			.divider {
				width: 6rpx;
				background-color: #fff;
				position: absolute;
				height: 100%;
				cursor: pointer;
				transform: translateX(-50%);
				box-shadow: 0 0 4rpx rgba(0, 0, 0, 0.2);
	
				&::after {
					content: '';
					position: absolute;
					width: 30rpx;
					height: 30rpx;
					background-color: #fff;
					border-radius: 50%;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					box-shadow: 0 0 4rpx rgba(0, 0, 0, 0.2);
				}
			}
	
			.progress-orange {
				background-color: #ff9500;
				height: 100%;
				transition: width 0.1s ease;
			}
		}
	
		.ratio-labels {
			display: flex;
			justify-content: space-between;
			margin-top: 20rpx;
			font-size: 28rpx;
			color: #b5b5b5;
	
	
		}
	}
	
	.left-ratio {
		color: #43D534;
		font-weight: bold;
	}
	
	.right-ratio {
		color: #F89E63;
		font-weight: bold;
	}
	
	.description {
		margin-top: 0rpx;
		font-size: 18rpx;
		color: #b5b5b5;
	}
	
	.notice {
		margin-top: 16rpx;
		font-size: 18rpx;
		color: #b5b5b5;
	}
	
	.submit-btn {
		padding: 0 40rpx;
		position: fixed;
		left: 0;
		bottom: 5vh;
		width: 100%;
	
		.btn {
			width: 280rpx;
			height: 60rpx;
			text-align: center;
			line-height: 60rpx;
			background: #43d534;
			border-radius: 15px;
			color: #fff;
			font-size: 28rpx;
			margin: 0 auto;
	
			&::after {
				border: none;
			}
		}
	}
	
	.nullview {
		width: 100%;
		height: 200rpx;
	}
	
	.title {
		color: #000000;
		font-size: 32rpx;
		font-weight: bold;
		width: 94%;
		margin: 0rpx auto;
	}
	
	.ratio-card {
		width: 94%;
		margin: 0 auto;
		margin-top: 30rpx;
		padding: 70rpx 20rpx 20rpx 20rpx;
		padding-top: 70rpx;
		background-color: #fff;
		border-radius: 20rpx;
		border-radius: 6px;
		box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.16);
		// padding: 30rpx;
		// margin-bottom: 40rpx;
	
	
	}
}
</style>